<template>
  <div class="box">
    <header class="header">cart</header>
    <div class="content">
      <div class="noshop" v-if="flag">
        <van-empty description="购物车空空如也，啥也不是">
          <van-button round type="danger" class="bottom-button" @click="$router.push('/home')">
            去逛逛
          </van-button>
        </van-empty>
      </div>
      <div v-else>
        <van-swipe-cell v-for="item of cartlist" :key="item.cartid">
          <van-card
            :num="item.num"
            :price="item.price"
            :title="item.proname"
            class="goods-card"
            :thumb="item.proimg"
          />
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
</style>
<script>
import Vue from 'vue'
import { getCartData } from './../../api'
import { Toast, Empty, Button, Card, SwipeCell } from 'vant'
Vue.use(Toast)
Vue.use(Empty)
Vue.use(Button)
Vue.use(Card)
Vue.use(SwipeCell)
export default {
  beforeRouteEnter (to, from, next) {
    if (localStorage.getItem('loginState') === 'true') {
      next()
    } else {
      next('/login')
    }
  },
  data () {
    return {
      cartlist: [],
      flag: false
    }
  },
  mounted () {
    getCartData({
      userid: localStorage.getItem('userid')
    }).then(res => {
      if (res.data.data.length === 0) {
        Toast('购物车空空如也')
        this.flag = true
      } else {
        this.cartlist = res.data.data
        this.flag = false
      }
    })
  }
}
</script>
